<template>
  <div>
    <h2>收银订单</h2>
    <div class="search">
      <div class="top">
        <div class="block">
          <span class="demonstration">创建时间:</span>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="center">
          <span>订单号:</span>
          <input v-model="value2" type="text" placeholder="请输入订单号" />
          <button @click="searchId">
            <i class="el-icon-search"></i>
          </button>
        </div>
        <div class="right">
          <span>用户名:</span>
          <input v-model="value3" type="text" placeholder="请输入用户名" />
          <button @click="searchName">
            <i class="el-icon-search"></i>
          </button>
        </div>
      </div>
      <button class="er-code">查看收款二维码</button>
      <el-table :data="newData" stripe style="width: 100%">
        <el-table-column prop="_id" label="订单号" >
        </el-table-column>
        <el-table-column prop="user" label="用户信息" >
        </el-table-column>
        <el-table-column prop="pay_actual" label="实际支付"> </el-table-column>
        <el-table-column prop="pay_integral" label="优惠价格"> </el-table-column>
        <el-table-column prop="pay_time" label="支付时间"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      value:'',
      value4:'',
      tableData: [
        
      ],
    };
  },
  methods:{
    searchId(){
      this.value4=this.value2
    },
    searchName(){
      this.value=this.value3
    },
   async fetchData(){
       let {data:res}=await this.$http.order.findByCash()
       console.log(res.data);
       this.tableData=res.data
    }
  },
  created(){
    this.fetchData()
  },
  computed:{
    newData(){
      if (this.value=='' && this.value4=='') {
        return this.tableData
      }else if(this.value4!=''){
        console.log(123);
          return this.tableData.filter(item=>item._id==this.value4)
      }else{
        return this.tableData.filter(item=>item.user.includes(this.value))
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.search {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .top {
    width: 100%;
    display: flex;
    .block {
      margin-right: 30px;
      span {
        margin-right: 20px;
      }
    }
    .center {
      margin-right: 30px;
      span {
        margin-right: 20px;
      }
      input {
        height: 40px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        border-radius: 4px 0 0 4px;
        outline: none;
      }
      button {
        height: 40px;
        width: 40px;
        border: none;
        background-color: blue;
        border-radius: 0 4px 4px 0;
        i {
          color: white;
        }
      }
    }
    .right {
      margin-right: 50px;
      span {
        margin-right: 20px;
      }
      input {
        height: 40px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        border-radius: 4px 0 0 4px;
        outline: none;
      }
      button {
        height: 40px;
        width: 40px;
        border: none;
        background-color: blue;
        border-radius: 0 4px 4px 0;
        i {
          color: white;
        }
      }
    }
  }
  .er-code {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 4px;
    background-color: blue;
    color: white;
    margin-top: 20px;
  }
}
</style>